<template>
    <div>
        <el-menu-item ref="menuLi" @click="changeUrl(item.path)" v-if="item.children && item.children.length === 1 && item.children.children? true : false " :index="item.children[0].path"> 
            <!-- <el-icon> -->
                <!-- 使用动态组件生成目标 标签 -->
                <!-- <component :is="item.children[0].meta.icon"></component> -->
            <!-- </el-icon> -->
            <span class="titleInfo">{{ item.children[0].meta.title }}</span>

            <img src="../static/menu-down.png" alt="" srcset="">
        </el-menu-item>
        <el-menu-item ref="menuLi"  @click="changeUrl(item.path)" v-else-if="!item.children" :index="item.path"> 
            <!-- <el-icon> -->
                <!-- 使用动态组件生成目标 标签 -->
                <!-- <component :is="item.children[0].meta.icon"></component> -->
            <!-- </el-icon> -->
            <span class="titleInfo">{{ item.meta.title }}</span>
            
            <img src="../static/menu-down.png" alt="" srcset="">
        </el-menu-item>
        <el-sub-menu v-else :index = item.path>
            <template #title>
                <!-- <el-icon> -->
                <!-- <component :is="item.meta.icon"></component> -->
                <!-- </el-icon> -->
                <span class="titleInfo">{{ item.meta.title }}</span>
                <img src="../static/menu-down.png" alt="" srcset="">
            </template>
            <!-- vue组件的递归 -->
            <SideBarItem v-for="itm of item.children" :key="itm.path" :item="itm" />
        </el-sub-menu>
    </div>
</template>
<script setup>
import { ref, watch,unref } from 'vue'
import { useRouter } from 'vue-router';

const props = defineProps({
    item: {
        type: Object || Array,
        default: false
    }
});

const router = useRouter()
const menuLi = ref(null);



const changeUrl = (path) => {
    router.push(path)
}

watch(
    () => props.item,
    (val) => {
        // console.log(val);
    }
);
</script>

<style>
.el-menu-item{
    background: url(../static/menu-uncheck.png) no-repeat;
    padding-bottom: 10px;
    line-height: 45px;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
}

.titleInfo{
    color: #00c4d7;
    font-size: 20px;
    /* margin: 0 auto; */
}
.el-menu-item.is-active{
    background: url(../static/menu-check.png) no-repeat;
}
.el-menu-item:hover{
    background-color: transparent;
}
.el-sub-menu__title{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    background: url(../static/menu-uncheck.png) no-repeat;
}
.el-menu:not(.el-menu--collapse) .el-sub-menu__title{
    padding-right: 20px;
}
.el-sub-menu .el-sub-menu__icon-arrow{
    display: none;
}
.el-sub-menu__title:hover{
    background-color:transparent
}
</style>